<template>
    <RightList :title="'数据源'" :isTop="true">
        <Button :name="'zaixian'" :content="'在线'" :click="() => { modellistShow = !modellistShow; lablistShow = false }"
            :actived="modellistShow" :left-button="true"></Button>
        <!-- <Button :name="'Labfuwu'" :content="'lab服务'"
            :click="() => { lablistShow = !lablistShow; modellistShow = false }" :actived="lablistShow"></Button> -->
        <Button :name="'bendishangchuan'" :content="'本地'" :click="openLocal"></Button>
        <ModelChange v-if="modellistShow" @close="modellistShow = false"></ModelChange>
        <!-- <modelLabChangeVue v-if="lablistShow" @close="lablistShow = false">
        </modelLabChangeVue> -->
    </RightList>
</template>

<script setup lang='ts'>
import { post } from '../../api/service';
import { ES3DTileset } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import { SceneTree } from 'xbsj-xe2/dist-node/xe2';
import { inject, ref } from 'vue';
import { XbsjEarthUi } from "../../scripts/xbsjEarthUi";
import ModelChange from './modeldatasource/ModelChange.vue';
import modelLabChangeVue from './modeldatasource/ModelLabChange.vue';
import RightList from '../../components/RightList.vue';
import Button from '../../components/Button.vue';
import {Message} from "earthsdk-ui";
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const sceneTree = inject('sceneTree') as SceneTree
const modellistShow = ref(false)
const lablistShow = ref(false)
const uploadServe = (params: any) => { //发布服务
    let url = `${xbsjEarthUi.cesiumLabUrl}/tile/model/create`
    if (xbsjEarthUi.cesiumLabToken) {
        url += `?labtoken=${xbsjEarthUi.cesiumLabToken}`
    }
    const token = localStorage.getItem('token') as string | undefined
    post(url, params, xbsjEarthUi.cesiumLabToken ? undefined : token).then((res: any) => {
        //@ts-ignore
        if (res.data && res.code === 1000) {
            let options = {
                name: params.name,
                url: `${xbsjEarthUi.cesiumLabUrl}/tile/model/service/` + res.data.id + '/tileset.json'+ `${xbsjEarthUi.cesiumLabToken ? '?labtoken=' + xbsjEarthUi.cesiumLabToken : ''}`,
            }
            console.log("服务发布成功", options)
            addSenceTree(options)
        }
    }).catch((err) => {
        console.log("服务发布失败", err)
    })
}
const addSenceTree = (options: any) => { //添加到场景树
    const json = {
        "type": "ES3DTileset",
        "url": `${options.url}`,
        "allowPicking": true,
        "name": `${options.name}`,
        "ref": "models"
    }
    const treeItem = sceneTree.createSceneObjectTreeItemFromJson<ES3DTileset>(json);
    if (!treeItem) return
    sceneTree.uiTree.clearAllSelectedItems()
    treeItem.uiTreeObject.selected = true
    const { sceneObject } = treeItem
    xbsjEarthUi.propSceneTree = treeItem
    if (!(sceneObject instanceof ES3DTileset)) return
    setTimeout(() => {
        sceneObject.flyTo()
    }, 500);
}
const openLocal = () => {
    let data = {
        filter: '瓦片数据|*.json;*.clt',
        multiSelect: false,
        creatable: false,
        dir: false
    }
    if(!xbsjEarthUi.cesiumLabUrl){
        Message.warning('请在服务中填入服务地址')
        return
    }
    let url = `${xbsjEarthUi.cesiumLabUrl}/server/filedialog`
    if (xbsjEarthUi.cesiumLabToken) {
        url += `?labtoken=${xbsjEarthUi.cesiumLabToken}`
    }
    const token = localStorage.getItem('token') as string | undefined
    post(url, data, xbsjEarthUi.cesiumLabToken ? undefined : token).then((res: any) => {
        if (res.code && res.code === 1000) {
            const path = res.data.path[0]
            console.log("请求成功", path)
            let arrName = path.split('\\')
            let params = {
                name: arrName[arrName.length - 2],
                storageUri: path,
            }
            uploadServe(params)
        }
    }).catch((error) => {
        console.log(error);
        Message.error('请在服务中检查服务地址是否正确或者其他问题')

    })
}
</script>
